<template>
  <div>
    <el-tabs
      v-model:activeKey="activeKey"
      class="source_public_nav"
      @change="change"
    >
      <el-tab-pane
        v-for="item in lists"
        :key="item.code"
        :tab="item.label"
        :disabled="item.disabled"
      />
      <el-tab-pane
        v-if="addOptions.title"
        :key="-99"
        :tab="addOptions.title"
      />
    </el-tabs>
  </div>
</template>
<script>
export default {
  props: {
    lists: {
      type: Array,
      default() {
        return []
      }
    },
    selectedId: [Number, String],
    addOptions: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeKey: -1
    }
  },
  watch: {
    lists: {
      handler() {
        this.activeKey = this.selectedId
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    change(code) {
      if (code === -99) {
        this.activeKey = this.code
        this.$emit('addEvents')
        return
      }
      // this.code = code
      this.$emit('toggle', code)
    }
  }
}
</script>
<style lang="less">
@import '../../styles/antd-theme.less';
.source_public_nav {
	&.ant-tabs {
		overflow: visible;
	}
	.ant-tabs-nav {
		overflow: visible;
		margin: 0;
	}
	&.ant-tabs-top > .ant-tabs-nav::before {
		display: none;
	}
	.ant-tabs-nav-scroll {
		height: 44px;
	}
	.ant-tabs-nav-wrap {
		height: 44px;
	}
	.ant-tabs-bar {
		margin: 0;
		border: 0;
	}
	.ant-tabs-ink-bar {
		display: none !important;
		opacity: 0;
	}

	.ant-tabs-tab {
		text-align: center;
		margin: 0;
		padding: 0;
		width: 110px;
		height: 40px;
		line-height: 40px;
		/* background: #e8ebf7; */
		border: 1px solid #d9d9d9;
		border-radius: 2px;
		transition: none;
		cursor: pointer;
		& + .ant-tabs-tab {
			margin-left: 15px;
		}
		.ant-tabs-tab-btn {
			width: 100%;
		}
		&:after {
			position: absolute;
			top: 37px;
			left: 50%;
			transform: translate(-50%, 0);
			display: block;
			content: '';
			border-top: 5px solid @primary-color;
			border-right: 5px solid transparent;
			border-left: 5px solid transparent;
			transition: opacity 0.3s;
			opacity: 0;
		}
		&.ant-tabs-tab-active {
			position: relative;
			.ant-tabs-tab-btn {
				color: #fff !important;
				background: @primary-color;
			}
			&:after {
				opacity: 1;
			}
		}
	}
}
</style>
